
<template>
  <div class="app-container">
    <div class="lbar">
      <el-col :span="24" :xs="24">
        <div class="head-container">
          <el-input
            v-model="userName"
            placeholder="请输入矫正人员名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="data">
          <el-date-picker
            style="width: 333px"
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dateChangeHandle"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </div>
        <div class="head-container fx scroll">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="true"
            node-key="id"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            show-checkbox

            @check-change="handleNodeCheck"
          />
        </div>
      </el-col>
    </div>
    <div class="map-control">
      <div class="playbox">
        <div class="playicon fl">
          <el-button v-if="playStatus" icon="el-icon-video-play" circle type="primary" @click="changePlayStatus();navgStatus('resume') "></el-button>
          <el-button v-if="!playStatus" icon="el-icon-video-pause" circle type="info" @click="changePlayStatus();navgStatus('pause')"></el-button>
        </div>
        <div class="progress fl" >
          <el-slider v-model="sliderValue" :step="0.01" @input="handleSliderInput"></el-slider>
        </div>
      </div>

      <div id = 'container' class="map"></div>
    </div>
  </div>

</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { treeselect } from "@/api/system/dept";
import {selectCorrectionUserById, treeSelectCorrectionUser} from "@/api/system/correctionuser";
import {
  addPath,
  deleteNavg,
  getMark,
  initMap,
  initPath,
  navgStatus,
  setNavg,
  setSlider
} from '../../../api/location/AMap'
import {getUserPosition,getUserPath} from "@/api/location/position";


export default {
  name: "posHistory",
  components: {Treeselect},
  data() {
    return {
      //
      userName: undefined,
      sliderValue:0,
      //轨迹
      pathSimplifierIns: undefined,
      //轨迹播放状态，false暂停，true播放
      playStatus: true,
      //高德地图
      map: undefined,
      // 部门树选项
      deptOptions: undefined,
      // 部门名称
      deptName: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      pickerOptions: {

      },
      value1: '',
      queryParams: {
        lng: 116.611279,
        lat: 40.113257,
        heartBeats: undefined,
        time: undefined
      },
      date: {
        startDate: undefined,
        endDate: undefined
      },
      path:undefined,

    }
  },
  methods: {
    getCorrectionUserTreeSelect() {
      treeSelectCorrectionUser().then(response => {
        this.deptOptions = response.data;
        //console.log(response);
      })
    },
    getCorrectionUserPath(id,name,date){
      selectCorrectionUserById(id, name).then(response => {
        console.log(typeof response.data.imei)
          getUserPath(date,response.data.imei).then((res1) =>{
            this.path = res1.data;
            if(this.path.length == 0){
              alert("您所选时间段没有历史轨迹");
              return ;
            }
            addPath(this.path,this.pathSimplifierIns,name);
            this.navg = this.pathSimplifierIns.createPathNavigator(0, {
              loop: true, //循环播放
              speed: 2000 //巡航速度，单位千米/小时
            });

            this.navg.start();
            this.setSlider();
            this.pathSimplifierIns.autoSetFitView();
          });
      })
    },
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    handleSliderInput(data){
      if(this.navg != null){
        data = data / 100 * this.navg.path.length;
        let idx = Math.floor(data);
        let tail = data - idx;
        this.navg.moveToPoint(idx,tail);
      }

    },
    handleNodeCheck(data, checked) {

      if (data.children != null) {
        return;
      }
      if (checked == true) {
        //console.log(this.date);
        console.log(data);
        this.$refs.tree.setCheckedKeys([data.id]);
        if (this.date.endDate == null || this.date.startDate == null) {
          alert("请选择起始时间");
          return
        }
        this.getCorrectionUserPath(data.id,data.label,this.date)
        this.playStatus = false;

        //addPath(this.path,this.pathSimplifierIns);
      }
      else if(checked == false)
      {
            this.navg.destroy();
            this.pathSimplifierIns.render();
      }
    },
    dateChangeHandle(data){
      this.date.startDate = data[0];
      this.date.endDate = data[1];
      let temp = this.$refs.tree.getCheckedNodes();
      if(this.navg != null && this.pathSimplifierIns != null){
        this.navg.destroy();
        this.pathSimplifierIns.render();
      }
      this.getCorrectionUserPath(temp[0].id,temp[0].label,this.date);
      this.playStatus = false;
    },
    formatTooltip(val) {
      return val / 100;
    },
    //播放图标切换
    changePlayStatus(){
      this.playStatus = !this.playStatus;
    },
    //巡航器状态控制
    navgStatus(status){
      if(status == "resume"){
        this.navg.resume();
      }
      else if(status == 'pause'){
        this.navg.pause();
      }
    },
    //设置滑块的值
    setSlider(){
      if(this.navg !=  undefined){
        let that = this;
        this.navg.on("move", function(){
          let idx = that.navg.getCursor().idx;
          let tail = that.navg.getCursor().tail;
          let len =that.navg.path.length;
          that.sliderValue = (idx + tail) / len * 100;
          if(idx == that.navg.getPathEndIdx()){
            that.navg.pause();
            that.playStatus = true;
          }
        })
      }
    },

  },
  created() {
    this.getCorrectionUserTreeSelect();
    initMap().then(map => this.map = map);
    initPath(this.map).then((psf)=>{this.pathSimplifierIns = psf;})
  },
  mounted() {
    window.addEventListener('scroll', function(){
      let t = $('body, html').scrollTop();   // 目前监听的是整个body的滚动条距离

      if(t>0){
        $('.playbox').addClass('playbox-active')
        if(t > 250){
          $('.fx').addClass('fx-active')

        }
      }else{
        $('.playbox').removeClass('playbox-active')
        $('.fx').removeClass('fx-active')
      }
    })
  },
  computed:{


  },
  watch:{

      // 根据名称筛选部门树
      userName(val) {
        this.$refs.tree.filter(val);
      }

  }
}
</script>

<style scoped>

.map-control {
  float: left;
  position: relative;
  height: 100%;
  width: 80%;
}

.playbox{
  height: 45px;
  width: 370px;
  position: absolute;
  left: 50%;
  display: inline-block;
  z-index: 1001;
  background: rgba(0,0,0,0.09);
}

.playbox-active{
  position: fixed;
  top: 0px;
}
.fx{

}
.fx-active{
  position: fixed;
  top: 0px;
}
.progress{
  display: inline-block;
  /*height: 35px;*/
  width: 300px;
  margin: 0px 15px;
}
.lbar{
  float: left;
  width: 20%;
  height: 84vh;
}
.map {
  width: 100%;
  height: 84vh;
  position: absolute;
  z-index: 999;
}
.fl{
  float: left;
}
.data{
  padding-bottom: 20px;
}

.scroll{
  height: 78vh;
  width: 100%;
  overflow: scroll;
}

</style>
